<!-- 充值页面 -->
<template>
  <publicPage>
    <view class="rechargePage">
      <view class="linh-50 fw-7 fz-16 px-16"> 填写充值金额 </view>
      <view class="disFlxAC linh-50 px-16">
        <view class="pr-5">￥</view>
        <u--input
            type="number"
            v-model="amount"
            :disabled="activeIndex !== 999"
            disabledColor="#FFFFFF"
            placeholder="请输入金额"
            border="none"
            clearable
        ></u--input>
      </view>

      <view class="linh-50 fw-7 fz-16 px-16 borderTop">
        <text>选择充值金额</text>
        <text style="color: #ff5454" class="fz-12 fw-4"
          >（云豆充值规则 : 1云豆=1元）</text
        >
      </view>
      <view class="listBox">
        <u-grid :border="false" col="3">
          <u-grid-item v-for="(item, index) in recharge" :key="index" @click="changeRecharge(index)">
            <view class="forBox disFlxCC" :class="{'isActive': activeIndex === index}">
              <view class="disFlx fw-7 fz-18 tc">
                <text>{{item.arrival || 0}}</text>
                <text class="pl-3">云豆</text>
              </view>
              <view class="disFlx fz-12 pt-2">
                <text>售价</text>
                <text class="pl-3">{{item.recharge || 0}}元</text>
              </view>
            </view>
          </u-grid-item>
          <u-grid-item @click="activeIndex = 999">
            <view class="forBox disFlxCC" :class="{'isActive': activeIndex === 999}">
              <view class="fw-7 tc">自定义金额</view>
            </view>
          </u-grid-item>
        </u-grid>
      </view>

      <view class="linh-50 fw-7 fz-16 px-16 borderTop">支付方式</view>
      <view
        v-for="(item, index) in 1"
        :key="index"
        class="disFlxJS px-16 py-10"
        style="border-top: solid 1px #f5f5f5"
      >
        <view class="disFlxAC">
          <u-image
            src="https://onelive.obs.cn-south-1.myhuaweicloud.com/uniapp/static/image220701%283%29.png"
            width="80rpx"
            height="80rpx"
          />
          <text class="pl-13">微信支付</text>
        </view>
        <view>
          <image src="@/static/image/image220701(14).png" style="width:40rpx;height:40rpx;" />
        </view>
      </view>
    </view>

    <view class="mx-16 py-30">
      <u-button
        type="primary"
        text="充值"
        :customStyle="{
          fontSize: '32rpx',
          borderRadius: '20rpx',
          height: '88rpx',
        }"
        :throttleTime="500"
        @click="configRecharge"
      ></u-button>
    </view>
  </publicPage>
</template>

<script>
import playApi from "@/api/play.js";
import StatusPopup from "../components/statusPopup.vue";

export default {
  components: {
    StatusPopup
  },
  data() {
    return {
      recharge: [], // 充值列表
      activeIndex: 0,
      amount: "",
    };
  },
  onLoad(options){
    if(options.czPlice){
      this.amount = options.czPlice
      this.activeIndex = 999
    }
    this.getList()
  },
  methods: {
    getList(){
      playApi.amountList().then((res) => {
        this.recharge = res.data
        if(this.activeIndex !== 999){
          this.amount = this.recharge[this.activeIndex].recharge
        }
      })
    },
    changeRecharge(index){
      this.activeIndex = index
      this.amount = this.recharge[this.activeIndex].recharge
    },
    configRecharge(){
      let params = {
        amount: this.amount
      }

      if(!params.amount){
        uni.showToast({
          title: '请输入充值金额',
          icon: 'none'
        })
        return
      }
      playApi.amountPlay(params).then(response=>{
        const { data } = response
        const that = this
        uni.requestPayment({
          timeStamp: data.timeStamp,
          nonceStr: data.nonceStr,
          package: data.packageValue,
          signType: data.signType,
          paySign: data.paySign,
          success (res) {
            uni.showToast({
              title: '充值成功'
            })
            that.$store.dispatch("getUserInfo");
            setTimeout(() => {
              that.goBack() // 返回上一页
            }, 1500);
          },
          fail (res) {
            uni.showToast({
              title: '充值失败',
              icon: 'none'
            })
          }
        })
      })
    }
  }
};
</script>
<style lang='scss' scoped>
.rechargePage {
  background-color: #ffffff;
  .listBox {
    border: solid 1px #f5f5f5;
    border-left: none;
    border-right: none;
    padding: 0 20rpx 26rpx 20rpx;
    .forBox {
      width: 220rpx;
      padding: 20rpx;
      border: 1px solid #dddddd;
      border-radius: 10rpx;
      margin-top: 26rpx;
      min-height: 128rpx;
    }
    .isActive{
      border: 1px solid #C5A028;
      color: #C5A028;
      background: #FFFCF3;
    }
  }
  .borderTop {
    border-top: solid 30rpx #f5f5f5;
  }
}
</style>